import React, { useState } from 'react'
import { FloatButton, Drawer, Divider, Tooltip } from 'antd'
import { SettingOutlined } from '@ant-design/icons'
import classNames from 'classnames'
import { useAppStore } from '@/store/app'
import styles from './index.module.less'
// 抽屉宽度
const DRAWER_WIDTH = 300

const SettingsFC: React.FC = () => {
  const [rightVal, setRightVal] = useState(0)
  const [open, setOpen] = useState(false)
  const { layout, changeLayout } = useAppStore()

  const handleClick = () => {
    if (!open) {
      setOpen(true)
      setRightVal(DRAWER_WIDTH)
    } else {
      onClose()
    }
  }

  const onClose = () => {
    setOpen(false)
    setRightVal(0)
  }

  return (
    <div className={styles.settings}>
      <FloatButton
        icon={<SettingOutlined />}
        shape='square'
        type='primary'
        style={{ right: rightVal, top: 240 }}
        onClick={handleClick}
        className={styles.settingsBtn}
      />
      <Drawer title='设置' width={DRAWER_WIDTH} onClose={onClose} closable={false} open={open}>
        <Divider plain>导航设置</Divider>
        <ul className={styles.layoutSetting}>
          <Tooltip placement='bottom' title='侧边模式'>
            <li
              className={classNames(styles.layoutItem, styles.layoutLeft, { [styles.isActive]: layout === 'left' })}
              onClick={() => {
                changeLayout('left')
              }}
            >
              <div></div>
              <div></div>
            </li>
          </Tooltip>
          <Tooltip placement='bottom' title='顶部模式'>
            <li
              className={classNames(styles.layoutItem, styles.layoutLeft, { [styles.isActive]: layout === 'top' })}
              onClick={() => {
                changeLayout('top')
              }}
            >
              <div></div>
              <div></div>
            </li>
          </Tooltip>
          {/* <Tooltip placement='bottom' title='混合模式'>
            <li className={`${style.layoutItem} ${style.layoutMix}`}>
              <div></div>
              <div></div>
            </li>
          </Tooltip> */}
        </ul>
      </Drawer>
    </div>
  )
}

export default SettingsFC
